<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>投股王</title>
    <link href="__PUBLIC__/weChat/css/base.css" rel="stylesheet" type="text/css">
    <style>
        .movie{width: 100%;height: 200px;background: black;float: left;}
        .live{height: 100vh;box-sizing: border-box;padding-top: 200px;}
        .live_content{background: #eeeeee;height: 100%;overflow: auto;padding-bottom: 49px;box-sizing: border-box;}
        .live_content_list{padding: 5px;}
        .live_content_list_top{width: 100%;height: 36px;line-height: 36px;}
        .live_content_list_bottom{background: #fff;padding: 10px;word-break: break-all;display: inline-block;font-size: 15px;}
        .live_name{font-size: 14px;padding-left: 40px;display: inline-block;}
        .live_name_zl{background: url("__PUBLIC__/weChat/images/icon_zl@2x.png") no-repeat left;background-size: 35px 16px;;}
        .live_name_hy{background: url("__PUBLIC__/weChat/images/icon_hy@2x.png") no-repeat left;background-size: 35px 16px;;}
        .live_name_yk{background: url("__PUBLIC__/weChat/images/icon_yk@2x.png") no-repeat left;background-size: 35px 16px;;}
        .live-time{float: right;font-size: 14px;}
        .live_chat{position: fixed;bottom: 0;width: 100%;height: 49px;border-top: 1px solid #e3e3e3;padding: 10px;background: #ffffff;box-sizing: border-box;}
        .btn{width: 42px;border-radius: 4px;background: #b63831;color: #ffffff;height: 25px;display: inline-block;cursor: pointer;line-height: 25px;text-align: center;font-size: 12px;}
        .emotion{width: 25px;height: 25px;padding: 0 5px;vertical-align: middle;}
        .live_chat>span{vertical-align: middle;display: inline-block;}
        .content_box{height: 100%;width: 76%;}
        .content_box>#content{height: 100%;width: 100%;border: 1px solid #e3e3e3;max-height: 75px;overflow: auto;}
        #facebox{left: 180px !important;}
    </style>
</head>
<body>
<div class="warp">
    <div class="movie">
        <div id="videoarea"></div>
    </div>
    <div class="live">
        <div class="live_content messageBox">
            <div id="message">

            </div>
        </div>
    </div>
    <div class="live_chat">
        <span class="content_box"><div id="content" contenteditable="true"></div></span>
        <span class="content_on"><img class="emotion" src="__PUBLIC__/weChat/images/icon_face@2x.png"/><span class="btn btn_send">发送</span></span>
    </div>
</div>
<script src="__PUBLIC__/weChat/js/jquery-2.2.2.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/jquery.qqFace.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/jquery-browser.js"></script>
<script src="__PUBLIC__/weChat/js/base.js"></script>
<!--  视频直播，正式上线时注销
<script>
    var _hv678videoarea = "videoarea";
    var _hv678usercode = "";
    var _hv678username = "";
    (function() {
        var hp = document.createElement("script");
        hp.src = "http://jsjr.hv678.com/room/script/playerchat/9621d2d944c34ac6ba9a8501c1ebc3e6"
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hp, s);
    })();
</script>
-->

<script>
    $(function () {
        $('.emotion').qqFace({
            assign:'content',
            path:'__PUBLIC__/home/face/'	//表情存放的路径
        });

        $("#content").on("focus", function () {
           $(".content_box").css({
               "width":"100%",
               "margin-bottom":"9px"
           });
            $(".live_chat").css("height","auto");
            $(".content_on").addClass("fr");
            scroll();
        });
        $(".btn_send").on("click", function () {
           sendMessage();
        });
        //获取聊天记录&quot
        $.ajax({
            url:"http://zbstest.guochengic.com/home/Chat/getChat",
            type:"POST",
            success: function (res) {
                console.log(res)
                if(res.code==0){
                    var html="";
                    for(var i =(res.data.is_verify.length-1);i>=0;i--){
                        var messageData=res.data.is_verify[i];
                        var message=JSON.parse(messageData.content);
                        var uid=$("#userId").attr("data-id");
                        var imgSrc=src(message.identity);
                        if(messageData.status==1){
                            if(message.uid!=uid){
                                html += '<div class="live_content_list" data-id="'+messageData.id+'">' +
                                        '<div class="live_content_list_top">'+
                                        '<p class="live-time font2">'+message.sendTime+'</p>'+
                                        '<span class="font2 live_name '+imgSrc+'">'+message.nickname+'</span>'+
                                        '</div>'+
                                        '<div class="live_content_list_bottom font1">'+message.content+
                                        '</div>'+
                                        '</div>';
                            }else {

                            }
                        };
                    }

                    $("#message").append(html);
                    var _height=$('#message')[0].scrollHeight;
                    $(".messageBox").animate({scrollTop:_height+'px'},500);
                }
            }
        });
    });






    ws = new WebSocket("ws://139.196.38.101:2346");
    ws.onopen = function() {
        console.log('连接成功');
    };
    //主要接受管理员推送的审核通过的数据
    ws.onmessage = function(e) {
        var message=JSON.parse(e.data);
        var uid=$("#userId").attr("data-id");
        var imgSrc=src(message.identity);
        console.log();
        if(message.status==1){
            if(message.uid!=uid){
                var html = '<div class="live_content_list" data-id="'+messageData.id+'">' +
                        '<div class="live_content_list_top">'+
                        '<p class="live-time font2">'+message.sendTime+'</p>'+
                        '<span class="font2 live_name '+imgSrc+'">'+message.nickname+'</span>'+
                        '</div>'+
                        '<div class="live_content_list_bottom font1">'+message.content+
                        '</div>'+
                        '</div>';
                $("#message").append(html);
                scroll();
            }
        };
    };
    function scroll(){
        var _height=$('#message')[0].scrollHeight;
        $(".messageBox").animate({scrollTop:_height+'px'},500);
    }
    function sendMessage(){
        var _content = $("#content").html();
        var content = $.trim(_content.replace(/&nbsp;/ig,' ')); // 用jQuery的trim方法删除前后空格
        if(content.length<=0 || content=="<br>"){
            alert("发送内容不能为空！");
            return;
        }
        var uid = "<?php echo $user_info['uid']?>";
        var nickname = "<?php echo $user_info['nickname']?>";
        var identity = "<?php echo $user_info['type']?>";
        var sendTime = getDate();
        var imgSrc = src(identity);
        $("#content").html("");
        var messageContent = JSON.stringify({"content":content,"status":0,"uid":uid,"nickname":nickname,"identity":identity,"sendTime":sendTime});
        $.ajax({
            url:"http://zbstest.guochengic.com/home/Chat/addChat",
            type:"POST",
            data:{
                content:messageContent
            },
            success: function (res) {
                console.log(res)
                if(res.code==0){
                    var message = JSON.stringify({"content":content,"status":0,"uid":uid,"nickname":nickname,"identity":identity,"sendTime":sendTime,"chatId":res.data.chat_id});
                    var myContent=JSON.parse(message);
                    var myMessage="<div class='chat_con chat_right' data-id='"+res.data.chat_id+"'>"+
                            "<p class='chat_p'><img class='icon_zl' src='"+imgSrc+"'/><span class='zl_name uid' data-id='"+uid+"'>"+nickname+"</span><span class='sendTime'>"+sendTime+"</span></p>"+
                            "<span class='yk_con yk_r dis_in'>"+myContent.content+"</span>"+
                            "</div>";
                    ws.send(message);
                    $("#message").append(myMessage);
                    var _height=$('#message')[0].scrollHeight;
                    $(".messageBox").animate({scrollTop:_height+'px'},500);
                }
            }
        });

    };

    function src(data){
        var imgSrc="";
        if(data=="tourist"){
            imgSrc="live_name_yk";
        }else if(data=="3"){
            imgSrc="live_name_hy";
        }else if(data=="1"){
            imgSrc="live_name_zl";
        }else if(data=="2"){
            imgSrc="live_name_zl";
        }else{
            imgSrc="live_name_yk";
        }
        return imgSrc;
    };
    //查看结果
    function replace_em(str){
        str = str.replace(/\</g,'&lt;');
        str = str.replace(/\>/g,'&gt;');
        str = str.replace(/\n/g,'<br/>');
        str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__PUBLIC__/home/face/$1.gif" border="0" />');
        return str;
    }
    //表情结束
</script>
</body>
</html>